<template>
  <div>
    <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>
    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <div class="hs-screen-row">
        <Input v-model="params.phone" placeholder="手机号码" clearable style="width: 200px" />
      </div>
      <div class="hs-screen-row">
        <Input v-model="params.code" placeholder="订单编号" clearable style="width: 200px" />
      </div>
      <div class="hs-screen-row">
        <Select v-model="params.state" placeholder="状态" clearable style="width:200px">
          <!-- 1.待核销  2.已核销  3.已失效  4.已完成  10、已过期 -->
          <Option value="1">待核销</Option>
          <Option value="2">已核销</Option>
          <Option value="3">已失效</Option>
          <Option value="4">已完成</Option>
          <Option value="10">已过期</Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <DatePicker @on-change="changeDate" v-model="dateInit" type="daterange" :editable="false" separator=" ~ "
          split-panels transfer placeholder="创建时间" style="width: 200px"></DatePicker>
      </div>
      <div class="hs-screen-row">
        <Button type="primary" @click="findOrderMallList">查询</Button>
      </div>
      <div class="hs-screen-row">
        <Button @click="resetScreen">重置</Button>
      </div>
    </Card>

    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <!--标题-->
      <div slot="title">
        <div class="hs-screen-box">
          <div>订单列表</div>
          <div>
            <ButtonGroup>
              <Button @click="findOrderMallList">
                <Icon type="md-refresh" size="15" />
              </Button>
            </ButtonGroup>
          </div>
        </div>
      </div>

      <!--表格数据-->
      <Table :columns="columns" :data="data" size="small" :stripe="true" :loading="isTableLoading"
        @on-select="selectTable" @on-select-cancel="selectCancelTable" @on-select-all="selectAllTable"
        @on-select-all-cancel="selectAllCancelTable">
        <template slot-scope="{ row }" slot="state">
          <!-- 1.待核销  2.已核销  3.已失效  4.已完成  10、已过期 -->
          <span v-if="row.state == 1">
            <Tag color="success">待核销</Tag>
          </span>
          <span v-if="row.state == 2">
            <Tag color="warning">已核销</Tag>
          </span>
          <span v-if="row.state == 3">
            <Tag color="primary">已失效</Tag>
          </span>
          <span v-if="row.state == 4">
            <Tag color="default">已完成</Tag>
          </span>
          <span v-if="row.state == 10">
            <Tag color="default">已过期</Tag>
          </span>
        </template>
        <template slot="isautoverify" slot-scope="{ row }">
          <span>{{ row.isautoverify == 1 ? '是' : '否' }}</span>
        </template>

        <template slot-scope="{ row }" slot="totalFreight">
          <span>{{ row.totalFreight ? row.totalFreight : 0 }}</span>
        </template>

        <template slot-scope="{ row }" slot="balanceDeduction">
          <span>{{ row.balanceDeduction ? row.balanceDeduction : '-' }}</span>
        </template>

        <template slot-scope="{ row }" slot="payMethod">
          <span v-if="row.payMethod == 'alipay'">支付宝支付</span>
          <span v-if="row.payMethod == 'wechat'">微信支付</span>
          <span v-if="!row.payMethod">-</span>
        </template>

        <template slot-scope="{ row }" slot="payAmount">
          <span v-if="row.payAmount">{{ row.payAmount }}</span>
          <span v-else>-</span>
        </template>

        <template slot-scope="{ row }" slot="action">
          <Button type="success" size="small" style="margin-right: 5px" @click="showOrderOpe(row)">
            查看
          </Button>
          <Button type="primary" size="small" style="margin-right: 5px"
            :disabled="row.isautoverify != 1 || row.state != 1" @click="verifyHandle(row)">
            核销
          </Button>
          <Button type="warning" size="small" plain style="margin-right: 5px" :disabled="row.state != 2"
            @click="cancelHandle(row)">
            撤销
          </Button>
        </template>
      </Table>
      <!--分页-->
      <div class="hs-page">
        <Page :total="total" show-sizer show-total transfer @on-change="changePage"
          @on-page-size-change="changePageSize" />
      </div>
    </Card>

    <!--显示模态框-->
    <order-ope ref="orderOpe"></order-ope>
  </div>
</template>

<script>
import hsBreadcrumb from '@/components/hs-breadcrumb';
import orderOpe from './components/order-ope';
import { pickBy, identity } from 'lodash';
import moment from 'moment';
export default {
  name: 'admin',
  data() {
    return {
      total: 0,
      importSuccess: 0,
      importFailed: 0,
      dateInit: '',
      isTableLoading: false,
      isShowImport: false,
      // 选中数据
      selectData: [],
      action: this.$apiURL + '/orderMall/importOrderExcel',
      headers: {
        token: JSON.parse(sessionStorage.getItem('J-TOKEN')).token
      },
      // 参数
      params: {
        page: 1,
        rows: 10,
        code: '',
        mallOrderCode: '',
        state: '',
        nickName: '',
        username: '',
        consigneeName: '',
        consigneePhone: '',
        startTime: '',
        endTime: '',
        mallOrderIds: '',
        isAutoVerify: '',
        phone: ''
      },
      // 表格列
      columns: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center'
        // },
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '下单手机号',
          minWidth: 130,
          key: 'maskphone'
        },
        {
          title: '团购编号',
          minWidth: 130,
          key: 'vouchercode'
        },
        // {
        //   title: '用户昵称',
        //   minWidth: 120,
        //   key: 'goodsname'
        // },
        {
          title: '商品名称',
          minWidth: 120,
          key: 'goodsname'
        },
        {
          title: '清洗件数',
          minWidth: 120,
          key: 'goodsnum'
        },
        // {
        //   title: '店铺名称',
        //   minWidth: 120,
        //   key: ''
        // },

        {
          title: '金额',
          key: 'payamount',
          minWidth: 120
        },
        {
          title: '状态',
          minWidth: 120,
          slot: 'state'
        },
        {
          title: '创建时间',
          minWidth: 120,
          key: 'createtime'
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 200,
          align: 'center'
        }
      ],
      // 表格数据
      data: [],
      failOrderColumns: [
        {
          title: '订单编号',
          minWidth: 190,
          key: 'orderCode'
        },
        {
          title: '订单标题',
          minWidth: 280,
          key: 'orderTitle',
          ellipsis: true
        }
      ],
      failOrderData: [],
      // 面包屑
      breadcrumb: [
        { name: '首页', url: '', icon: 'ios-home-outline', size: 18 },
        { name: '商城', url: '', icon: '', size: 0 },
        { name: '团购订单', url: '', icon: '', size: 0 }
      ]
    };
  },
  created() {
    // 订单-列表查询
    this.findOrderMallList();
  },
  methods: {
    // 日期条件赋值
    changeDate(e) {
      this.params.startTime = e[0];
      this.params.endTime = e[1];
    },
    // 订单-列表查询
    findOrderMallList() {
      this.isTableLoading = true;
      this.axios
        .post('/voucher/v1/findList', pickBy({ ...this.params, serviceCode: 'xy' }, identity))
        .then(res => {
          console.log(res);
          this.isTableLoading = false;
          if (res.status == 200) {
            this.total = res.data.total;
            this.data = res.data.rows.map(item => ({
              ...item,
              createtime: moment(item.createtime).format(
                'YYYY-MM-DD HH:mm:ss'
              )
            }));
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '查询订单列表接口报错',
              duration: 0
            });
          }
        });
    },
    // 是否取消订单
    isOrderCancel(row) {
      this.$Modal.confirm({
        title: `是否取消当前订单？`,
        onOk: () => {
          // this.$Message.info('您点击了确定.');
          this.orderCancel(row);
        },
        onCancel: () => {
          this.$Message.info('您点击了取消.');
        }
      });
    },
    // 是否删除订单
    isDeleteOrderMall(row) {
      // console.log(row)
      this.$Modal.confirm({
        title: `是否删除当前订单？`,
        onOk: () => {
          // this.$Message.info('您点击了确定.');
          this.deleteOrderMall(row);
        },
        onCancel: () => {
          this.$Message.info('您点击了取消.');
        }
      });
    },
    // 取消订单
    orderCancel(row) {
      this.$Spin.show();
      this.axios
        .post('/orderMall/orderCancel', {
          mallOrderId: row.mallOrderId
        })
        .then(res => {
          console.log(res);
          setTimeout(() => {
            this.$Spin.hide();
          }, 300);
          if (res.status == 200) {
            this.$Message.success('操作成功.');
            this.findOrderMallList();
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '取消订单接口报错',
              duration: 0
            });
          }
        });
    },
    // 删除订单
    deleteOrderMall(row) {
      this.$Spin.show();
      this.axios
        .post('/orderMall/deleteOrderMall', {
          mallOrderId: row.mallOrderId
        })
        .then(res => {
          console.log(res);
          setTimeout(() => {
            this.$Spin.hide();
          }, 300);
          if (res.status == 200) {
            this.$Message.success('操作成功.');
            this.findOrderMallList();
          }
          if (res.status == 201) {
            // this.$Message.error(res.msg);
            this.$Notice.error({
              title: '删除订单失败',
              desc: res.msg
            });
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '删除订单接口报错',
              duration: 0
            });
          }
        });
    },
    // 显示操作模态框
    showOrderOpe(row) {
      this.$refs.orderOpe.show(row);
    },
    // 日期条件赋值
    changeDate(e) {
      this.params.startTime = e[0];
      this.params.endTime = e[1];
    },
    // 重置筛选条件
    resetScreen() {
      this.params.mallOrderCode = '';
      this.params.state = '';
      this.params.nickName = '';
      this.params.username = '';
      this.params.consigneeName = '';
      this.params.consigneePhone = '';
      this.params.startTime = '';
      this.params.endTime = '';
      this.params.code = '';
      this.params.phone = '';
      this.params.isAutoVerify = '';
      this.params.mallOrderIds = '';
      this.dateInit = '';
    },
    // 改变页数
    changePage(e) {
      this.params.page = e;
      this.findOrderMallList();
    },
    // 改变页容量
    changePageSize(e) {
      this.params.rows = e;
      this.findOrderMallList();
    },
    // 在多选模式下有效，选中某一项时触发
    selectTable(selection, row) {
      this.selectData = selection;
    },
    // 在多选模式下有效，取消选中某一项时触发
    selectCancelTable(selection, row) {
      this.selectData = selection;
    },
    // 在多选模式下有效，点击全选时触发
    selectAllTable(selection) {
      this.selectData = selection;
    },
    // 在多选模式下有效，点击取消全选时触发
    selectAllCancelTable(selection) {
      this.selectData = selection;
    },
    verifyHandle(row) {
      this.axios
        .get('/voucher/v1/autoVerify', {
          params: { voucherId: row.voucherid }
        })
        .then(res => {
          if (res.status != 200) {
            this.$Notice.error({
              title: '核销失败',
              desc: res.msg,
              duration: 3
            });
          } else {
            this.$Notice.success({
              title: '核销成功',
              desc: '核销成功',
              duration: 3
            });
            this.findOrderMallList();
          }
        });
    },
    cancelHandle(row) {
      this.axios
        .get('/voucher/v1/cancelVerify', {
          params: { id: row.voucherid }
        })
        .then(res => {
          if (res.status != 200) {
            this.$Notice.error({
              title: '撤销失败',
              desc: res.msg,
              duration: 3
            });
          } else {
            this.$Notice.success({
              title: '撤销成功',
              desc: '撤销成功',
              duration: 3
            });
            this.findOrderMallList();
          }
        });
    }
  },
  components: {
    hsBreadcrumb,
    orderOpe
  }
};
</script>

<style scoped lang="less">
.hs-upload-image-box {
  width: 485px;
  display: flex;
  align-items: center;
  justify-content: center;

  .hs-upload-add {
    cursor: pointer;
    width: 100%;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #cccccc;
    transition: all 0.3s;

    &:hover {
      color: #2d8cf0;
      border: 1px dashed #2d8cf0;
    }
  }
}

.z-import-message {
  margin: 10px 0;
}
</style>
